<template>
  <div>
    <el-card class="box-card">
      <el-select v-model="info.type" placeholder="请选择" @change="newsList" clearable>
        <el-option v-for="item in options" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 60px;" @click="addNews">新增</el-button>
      <el-table :data="tableData" border style="width: auto;margin-top: 20px;">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>

        <el-table-column prop="name" label="专家姓名" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" width="180">
        </el-table-column>
        <el-table-column label="专家照片" width="180">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src=" scope.row.headImg" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="专家类别" width="180">
        </el-table-column>
        <el-table-column prop="domain" label="所属领域" width="180">
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editNews(scope.row, 1)">编辑</el-button>
            <el-button type="text" size="small" @click="editNews(scope.row, 0)">查看</el-button>
            <el-button type="text" size="small" style="color: red;" @click="deleteNews(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-box">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="info.page"
          :page-size="info.pageNum" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import { findExpertPage, delExpertById } from "@/request/supervisionCenterApi.js"
export default {
  data() {
    return {
      tableData: [],
      info: {
        pageNum: 10,
        page: 1,
        type: "",
        companyId: localStorage.getItem("companyId")
      },
      options: [
        "果业中心技术人员", "西农专家", "农民", "院士", "技术工程师"
      ],
      total: 0
    }
  },
  mounted() {
    this.newsList()
  },
  methods: {
    async newsList() {
      let res = await findExpertPage(this.info)
      console.log(res)
      this.tableData = res.data.content
      this.total = res.data.totalElements
    },
    addNews() {
      this.$router.push({
        path: '/expertEdit',
      })
    },
    editNews(row, isShow) {
      this.$router.push({
        path: '/expertEdit',
        query: {
          data: encodeURIComponent(JSON.stringify(row)),
          isShow: isShow,
          introduce: row.introduce
        }
      })
    },
    handleCurrentChange(val) {
      this.info.page = val
      this.newsList()
      console.log(`当前页: ${val}`);
    },
    deleteNews(id) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await delExpertById(id)
        if (res.code != 200) return
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.newsList()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.box-card {
  width: 100%;
}

.pagination-box {
  width: 100%;
  padding: 20px;

  .el-pagination {
    text-align: right;
    margin-right: 200px;
    margin-top: 40px;
  }
}
</style>